<script setup>
import { ref, computed, onMounted, nextTick } from 'vue';
import { addAdditionalCommentApi, deleteAdditionalCommentApi } from '@/apis/additionalComment'
import { useUserStore } from '@/store/user';
import { ElMessage, ElMessageBox } from 'element-plus';

const userStore = useUserStore()

const props = defineProps({
  additionalCommentList: {
    type: Object,
    Required: true
  },
  parentHeight: {
    type: Object,
    Required: true
  },
  getAdditionalCommentList: {
    type: Function,
    Required: true
  },
  key: {
    type: Number,
    Required: true
  },
  clickReplyMessage: {
    type: Function,
  }

})




// #region 处理回复的逻辑
const textarea = ref('')
const submit = async () => {


  // 发送请求添加追评
  const ref = await addAdditionalCommentApi({
    content: textarea.value,
    beCommentUserId: props.additionalCommentList.userId,
    userId: userStore.userInfo.id,
    commentId: props.additionalCommentList.commentId,
  })

  ElMessage({ type: 'success', message: ref.data })


  textarea.value = ''

  // 重新获取追评列表
  await props.getAdditionalCommentList()


  // 把回复框收起来，回复框固定的130px
  dynamicHeight.value.style.height = dynamicHeight.value.offsetHeight - 130 + 'px'
  isReply.value = false


  //让父组件再次更新回复列表高度
  setTimeout(() => {
    props.parentHeight.submitAfterHeight()
  }, 100)
}


//每一条追评总高度 - 110px的回复框高度 = 一开始显示的高度
const initDynamicHeight = () => {

  dynamicHeight.value.style.height = dynamicHeight.value.offsetHeight - 110 + 'px'

}


// #endregion

// #region 删除追评的逻辑
const handleDelete = async () => {

  ElMessageBox.confirm('确定要删除该追评吗？', '提示')
    .then(async () => {
      /* 重新父组件设置高度 */
      nextTick(() => {
        props.parentHeight.deleteAfterHeight(dynamicHeight.value.offsetHeight)

      })

      /* 删除的请求 */
      const ref = await deleteAdditionalCommentApi({
        additionalCommentId: props.additionalCommentList.additionalCommentId
      })

      ElMessage({ type: 'success', message: ref.data })

      // 重新获取追评列表
      await props.getAdditionalCommentList()


    })
    .catch(() => {
      //取消删除
      ElMessage({ type: 'info', message: '取消删除' })
    })





}

// #endregion

// console.log(props.additionalCommentList);


// #region 动态高度区


//动态高度适应回复框
const dynamicHeight = ref(null)
const isReply = ref(false)
const replyBtn = ref(false)

/* 点击回复时的逻辑 */
const handleReplyHeight = () => {
  if (!isReply.value) {

    //调用父组件传递的方法，让父组件的高度增加130px
    dynamicHeight.value.style.height = dynamicHeight.value.offsetHeight + 130 + 'px'

    props.parentHeight.addAdditionalCommentReplyHeight()



    replyBtn.value = true
    //因为定时器的异步的。所以会先执行下面的代码。后面再执行定时器里面的代码，不是线性的
    setTimeout(() => {
      replyBtn.value = false
    }, 300)

    isReply.value = true
  } else {
    //调用父组件传递的方法，让父组件的高度减少130px
    dynamicHeight.value.style.height = dynamicHeight.value.offsetHeight - 130 + 'px'
    props.parentHeight.reduceAdditionalCommentReplyHeight(dynamicHeight.value.style.height)

    replyBtn.value = true
    setTimeout(() => {
      replyBtn.value = false
    }, 300)


    isReply.value = false
  }
}


// #endregion


// #region 点击自己的追评内容的时候，触发底部的回复框
const clickAdditionalCommentMessage = (event) => {
  props.clickReplyMessage(event,
    props.additionalCommentList.content,
    props.additionalCommentList.commentId,
    props.additionalCommentList.userId,
    props.getAdditionalCommentList)
}
// #endregion




// #region 配置双端的宽度
const dynamicAvatarWidth = computed(() => {

  return window.innerWidth > 768 ? 1 : 3
})

const dynamicMessageWidth = computed(() => {

  return window.innerWidth > 768 ? 23 : 21
})

// #endregion

onMounted(() => {
  //给定动态高度，不能写死，不然父组件也是死数据，不能根据字多字少的情况动态设置高度
  setTimeout(() => {
    /* 手机端没有回复框，如果不需要这个逻辑 */
    if (window.innerWidth > 768) {
      initDynamicHeight()
    }
  }, 100)
})

</script>

<template>
  <div class="container" ref="dynamicHeight">
    <el-row class="message">
      <el-col :span="dynamicAvatarWidth">
        <el-avatar shape="square" :size="30" :fit="fit" :src="additionalCommentList.userAvatar" />
      </el-col>
      <el-col :span="dynamicMessageWidth">
        <!-- 贴吧在回复时是不会保存格式的 -->
        <span>{{ additionalCommentList.userName }}</span> 回复
        <span>{{ additionalCommentList.beUserName }}</span>:
        <span @click="clickAdditionalCommentMessage($event)">{{ additionalCommentList.content }}</span>
        <br>
        <br>
        <div class="info">
          <span>{{ additionalCommentList.additionalCommentTime }} </span>
          <button :disabled="replyBtn" @click="handleReplyHeight" class="hidden-md-and-down">回复</button>
          <button v-if="additionalCommentList.userId === userStore.userInfo.id" @click="handleDelete">删除</button>
        </div>
      </el-col>


    </el-row>
    <div class="reply hidden-md-and-down">
      <el-input v-model="textarea" resize="none" class="report" :rows="2" style="width: 80%; margin :10px 0 0 80px;"
        type="textarea" placeholder="恶言伤人心思密达！" maxlength="150" show-word-limit @keyup.enter="submit" />
      <br>
      <el-button type="primary" class="published" @click="submit">发表</el-button>
    </div>

  </div>

</template>

<style lang='scss' scoped>
.message {
  display: flex;
  justify-content: start;
  word-break: break-all;
  margin-bottom: 15px;
  border-bottom: 1px solid rgb(179, 186, 188);


}



//pc端样式
@media (min-width: 768px) {
  .container {
    overflow: hidden;

    //动画效果
    transition: height 0.3s ease-in-out;

    .info {
      float: right;
      margin-bottom: 5px;

      &> :nth-child(2) {
        color: rgb(16, 132, 177);
        margin: 0 20px;

        &:hover {
          cursor: pointer;
        }
      }

      &> :nth-child(3) {
        color: rgb(16, 132, 177);

        &:hover {
          cursor: pointer;
        }
      }
    }

    .reply {
      width: 100%;
      height: 110px;
      background-color: rgb(228, 227, 227);

      .published {
        margin-left: 820px;
        margin-top: 10px;
      }
    }
  }
}

//移动端样式
@media (max-width: 768px) {
  .info {
    float: right;
    margin: 0 10px 5px 10px;

    &> :nth-child(3) {
      color: rgb(16, 132, 177);
      margin-left: 10px;

      &:hover {
        cursor: pointer;
      }
    }
  }
}
</style>